<template>
	<view class="content">
			<view>美食</view>
			<view>唱歌</view>
			<view>汽车</view>
			<view>美食</view>
			<view>美食</view>
			<view>结婚</view>
	</view>	
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.content{
		display: flex;
		flex-wrap:wrap;
		height:100%;
		//  设置每一个格子的属性
		view{
			width: calc((750rpx - 8px)/3);
			/* 设置每个九宫格的宽度*/
			height: 200rpx;
			background-color: #fff;
			/* 格子背景色 */
			display: flex;
			/* 在格子内部进行布局 */
			flex-direction: column;
			/* 使容器内的子元素垂直排列 *
			justify-content: center;
			/* 格子内容水平居中 */
			align-items: center;
			/* 格子内容垂直居中 */
			border: 1rpx solid rgb(219,219,219);
			margin: 1rpx 1rpx 0rpx 1rpx;	
		}
	}
</style>
